<!--
  * 周报列表
-->
<template>
  <a-form class="smart-query-form" v-privilege="'task:query'">
    <a-row class="smart-query-form-row">
      <a-form-item label="上级项目名称" class="smart-query-form-item">
       <CommonSelect  v-model:value="queryForm.parentId" :select-type="SELECT_TYPE_ENUM.TM_HAS_ROOT_PROJECT.value"  width="260px" />
      </a-form-item>

      <a-form-item label="部门名称" class="smart-query-form-item">
        <CommonSelect  v-model:value="queryForm.deptCode" :select-type="SELECT_TYPE_ENUM.COMMON_HAS_DEPT.value"  width="260px" />
      </a-form-item>

      <a-form-item label="创建时间" class="smart-query-form-item">
        <a-space direction="vertical" :size="12">
          <a-range-picker v-model:value="searchDate" @change="dateChange" />
        </a-space>
      </a-form-item>
      <a-form-item class="smart-query-form-item smart-margin-left10">
        <a-button type="primary" @click="ajaxQuery">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button @click="resetQuery">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>

  <a-card size="small" :bordered="false" :hoverable="true">
    <a-table
      :scroll="{ x: 1200 }"
      size="small"
      :dataSource="tableData"
      :columns="columns"
      rowKey="id"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'presentRate'">
          <span>{{ text }}%</span>
        </template>
      </template>
    </a-table>
  </a-card>
</template>
<script setup lang="ts">
  import { reactive, ref, onMounted} from 'vue';
  import { reportApi } from '/@/api/task/report-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import CommonSelect from '/@/components/common/common-select.vue'
  import { SELECT_TYPE_ENUM } from '/@/constants/system/common-select-const';
  // --------------------------- 企业表格 列 ---------------------------

  const columns = ref([
    {
      title: '项目名称',
      dataIndex: 'name',
      width: 280,
      //ellipsis: true,
    },
    {
      title: '负责人',
      dataIndex: 'implementerName',
      width: 100,
      ellipsis: true,
    },
    {
      title: '项目类型',
      dataIndex: 'typeName',
      width: 100,
      ellipsis: true,
    },
    {
      title: '项目状态',
      dataIndex: 'stateName',
      width: 100,
      ellipsis: true,
    },
    {
      title: '采集阶段',
      dataIndex: 'collectState',
      width: 100,
      ellipsis: true,
    },
    {
      title: '工时统计',
      dataIndex: 'manHourSum',
      width: 100,
      ellipsis: true,
    },
    {
      title: '当前状态',
      dataIndex: 'currentContent',
      width: 280,
      ellipsis: true,
    },
  ]);

  // --------------------------- 查询 ---------------------------
  const queryFormState = {
    parentId: undefined,
    deptCode: undefined,
    startDate: undefined,
    endDate: undefined,
  };
  const queryForm = reactive({ ...queryFormState });
  const tableLoading = ref(false);
  const tableData = ref([]);

  // 日期选择
  let searchDate = ref();

  function dateChange(dates, dateStrings:Array<String>) {
    queryForm.startDate = dateStrings[0];
    queryForm.endDate = dateStrings[1];
  }

  function resetQuery() {
    searchDate.value = [];
    Object.assign(queryForm, queryFormState);
    ajaxQuery();
  }

  async function ajaxQuery() {
    try {
      tableLoading.value = true;
      let responseModel = await reportApi.getProjectReport(queryForm);
      tableData.value = responseModel.data;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(ajaxQuery);
</script>
